<template>
  <el-form class="fromhei" :model="dynamicValidateForm" :rules="formRules" ref="formRules" label-position="top">
    <template v-for="(domain, index) in dynamicValidateForm.domains" :key="index">
      <div class="forminput">
        <div> {{ '伤员' + index }}</div>
        <div class="forminputbtn">
          <img class="forminputbtnimg" :src="getAssetsFile('jyjc', 'slotadd')" @click="addFormGroup">
          <img class="forminputbtnimg" v-if="index !== 0" :src="getAssetsFile('jyjc', 'slotdel')"
            @click="removeFormGroup(index)" />
        </div>
      </div>
      <el-row justify="space-between" :gutter="20">
        <el-col :span="11">
          <el-form-item label="位置描述:" :prop="'domains.' + index + '.value1'" :rules="{
            required: true,
            message: 'domain can not be null',
            trigger: 'blur',
          }">
            <el-input v-model="domain.value1" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="前往医院:" :prop="'domains.' + index + '.value1'" :rules="{
            required: true,
            message: 'domain can not be null',
            trigger: 'blur',
          }">
            <el-input v-model="domain.value1" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="伤亡程度:" :prop="'domains.' + index + '.value1'" :rules="{
            required: true,
            message: 'domain can not be null',
            trigger: 'blur',
          }">
            <el-input v-model="domain.value1" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="发现时间:" :prop="'domains.' + index + '.value1'" :rules="{
            required: true,
            message: 'domain can not be null',
            trigger: 'blur',
          }">
            <el-date-picker v-model="domain.value1" type="datetime" format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="人员姓名:" :prop="'domains.' + index + '.value1'" :rules="{
            required: true,
            message: 'domain can not be null',
            trigger: 'blur',
          }">
            <el-input v-model="domain.value1" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="人员性别:" :prop="'domains.' + index + '.value1'" :rules="{
            required: true,
            message: 'domain can not be null',
            trigger: 'blur',
          }">
            <el-select v-model="domain.value1" popper-class="form-select">
              <el-option value="男" label="男" />
              <el-option value="女" label="女" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="经度:" :prop="'domains.' + index + '.value1'" :rules="{
            required: true,
            message: 'domain can not be null',
            trigger: 'blur',
          }">
            <el-input v-model="domain.value1" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="纬度:" :prop="'domains.' + index + '.value1'" :rules="{
            required: true,
            message: 'domain can not be null',
            trigger: 'blur',
          }">
            <el-input v-model="domain.value1" />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </el-form>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getAssetsFile } from '@/utils/compnt'
// 动态表单组

const emit = defineEmits([
  'elsubmit',
])


const formRules = ref()


const dynamicValidateForm = ref(
  {
    domains: [
      {
        id: Date.now(),
        value1: '',
        value2: '',
        value3: '',
        value4: ''
      },
    ]
  }
)




const addFormGroup = () => {

  dynamicValidateForm.value.domains.push({
    id: Date.now(),
    value1: '',
    value2: '',
    value3: '',
    value4: ''
  })

}

const submitForm = async () => {
  if (!formRules.value) return
  try {
    await formRules.value.validate((valid) => {
      if (valid) {
        emit('elsubmit', { ...dynamicValidateForm.value })
      }
    })
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const removeFormGroup = (index) => {
  dynamicValidateForm.value.domains.splice(index, 1)
}



/**
 * 清除表单验证
 */
const clearValidate = () => {
  if (formRules.value) {
    formRules.value.clearValidate()
  }
}

const handleReset = () => {
  if (formRules.value) {
    formRules.value.resetFields()
    dynamicValidateForm.value.domains = [{
      id: Date.now(),
      value1: '',
      value2: '',
      value3: '',
      value4: ''
    }]
  }
}

defineExpose({
  submitForm,
  handleReset,
  clearValidate,

})



onMounted(() => {




})
</script>

<style lang="less" scoped>
.fromhei {
  height: 620px;
  overflow-x: hidden;
  scrollbar-width: none;
}

.forminput {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .forminputbtn {
    display: flex;
    width: 40px;
    justify-content: space-between;
    align-items: center;

    .forminputbtnimg {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }
}
</style>